<template>
  <view class="loginbox">
	<image class="gb" src="../../static/img/login-bg.png" mode=""></image>
	<view class="dl_bg">
		<view class="top">
			 <view class="title">欢迎加入我们</view>
			<view class="form">
				  <view class="user">
					  <view class="iconfont icon-yonghuming"></view>
					  <input v-model="userdata.username" type="text" placeholder="注册的用户名"  maxlength="13" placeholder-class="place"  /></view>
				  <view class="password">
					  <view class="iconfont icon-mima"></view>
					  <input v-model="userdata.password" type="password" placeholder="注册的密码" maxlength="13"  placeholder-class="place"/>
				</view>
				<view class="button">
					 <view class="wj" @click="gologin">
					 	已有账号？
					 </view>
					 <view class="loginbotton" @click="getuserzcdata">注册</view>
				</view>
			</view>
		</view>
	</view>
	<image class="xx" src="../../static/img/login-yl.png" mode="aspectFill"></image>
  </view>
</template>
<script setup>
	import {ref} from 'vue'
	import {getuserzc} from '@/api/index.js'
	const userdata=ref({
		  username:"",
		  password:""
	})
	const gologin=()=>{
		 uni.navigateBack()
	}
	const getuserzcdata=async()=>{
		if(!userdata.value.username.trim() || !userdata.value.password.trim()){
					    uni.showToast({
					    	title:"账号或密码不能为空！",
							icon:"none"
					    })
			return
		  }
         if(userdata.value.username.trim().length < 4 || userdata.value.password.trim().length < 4){
			    uni.showToast({
			    	title:"账号或密码不小于4位！",
					icon:"none"
			    })
			return
		 }
		
		const rudata=await getuserzc(userdata.value.username.trim(),userdata.value.password.trim())
		if(rudata.code==200){
			  uni.showToast({
			  	title:rudata.msg,
				icon:"none",
			  })
			  setTimeout(()=>{
				  uni.navigateTo({
				  	 url:"/pages/login/login"
				  })
			  },2000)
		}else{
			uni.showToast({
				title:rudata.msg,
				icon:"none",
			})
		}
	}
</script>

<style lang="scss" scoped>
	.loginbox{
		height: 100vh;
		width: 100vw;
		position: relative;
		.gb{
			position: absolute;
	     	top: 0;
		    left: 0;
			height: 100%;
			width: 100%;
		}
		.dl_bg{
			position: absolute;
			height: 1074rpx;
			width: 100%;
			bottom: 0;
			background-color: rgba(255, 255, 255, 0.5);
			backdrop-filter:blur(10rpx);
			border-radius: 50rpx 50rpx 0 0;
			z-index: 2;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 150rpx 55rpx 0 55rpx;
			.top{
				height: 600rpx;
				.title{
					height: 140rpx;
					font-size: 50rpx;
					font-weight: 700;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.form{
					height: 270rpx;
					width: 100%;
					border-radius: 26rpx;
					background-color: #fdfdfd;
					padding: 0 25rpx;
					:deep(.place){
							 font-size: 30rpx;
						 color: #b1b2bd;
					}
					.button{
						height: 160rpx;
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.wj{
							color: #969cf5;
							font-size: 25rpx;
						}
						.loginbotton{
							width: 290rpx;
							height: 110rpx;
							background-color: #0d2b44;
							color: #fff;
							border-radius: 110rpx;
						}
					}
					>view{
						height: 50%;
						display: flex;
						align-items: center;
						 view{
							 display: flex;
							 align-items: center;
							 justify-content: center;
							  margin-right:20rpx ;
						 }
					}
					.user{
						view{
							height: 70rpx;
							width: 70rpx;
							background-color: #ffebe4;
							color: #f89c30;
							border-radius: 50%;

						}
						border-bottom: 1rpx solid #eee;
					}
					.password{
						view{
							height: 70rpx;
							width: 70rpx;
							background-color: #ebecff;
							color: #adacf5;
							border-radius: 50%;

						}
					}
				}
			}
			.bottom{
				height: 250rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 55rpx;
				view{
					height: 100rpx;
					width: 100rpx;
					background-color: #fff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 50rpx;
				}
			}
		}
		.xx{
			position: absolute;
			height: 350rpx;
			width: 350rpx;
		    top: 220rpx;
			left: 50%;
			transform: translate(-50%);
			z-index: 3;
			animation: move 5s linear infinite;
		}
		@keyframes move {
			0% {
				transform:translate(-50%)  rotate(0);
			}
			50%{transform:translate(-50%) rotate(5deg);}
			100%{transform:translate(-50%) rotate(0);}
		}
	}
</style>
